【HTML】inputタグ - 入力項目

HTMLのinputタグについて解説します。

inputタグ

inputタグは“入力項目”を意味するタグです。

テキストやボタン、チェックボックスなどの様々な入力形式を利用できます。

また、form要素と合わせて使い、入力値（データ）をサーバーに送信することが可能です。

基本構文

<input name="項目名" type="タイプ" value="値">

name属性

name属性は入力項目の名称です。

入力値をサーバーに送信する際、この属性に設定した名称で送信します。

type属性

type属性は入力項目の種類です。

textやbuttonなどの規定値が存在し、その値によって入力形式が異なります。

value属性

value属性は入力値です。

この属性の値を予め設定すると初期値になります。

入力形式の種類

inputタグの代表的な入力形式は以下通りです。

※ Webブラウザや端末により同じタイプでも動作が異なる場合があることに注意が必要です。

text / テキスト

textはテキストの入力形式です。

この入力形式は一行の入力のみ対応し、改行は行えません。

<input type="text">

改行を含む入力に対応するにはtextareaタグを使用します。

search / 検索キーワード

searchは検索キーワードの入力形式です。

<input type="search">

number / 数値

numberは数値の入力形式です。

半角数字のみ入力できます。

<input type="number">

range / 範囲数値

rangeは範囲数値の入力形式です。

最大値はmax属性、最小値はmin属性で設定します。

<input type="range" max="10" min="0">

button / ボタン

buttonはボタンの入力形式です。

ボタンに表示するテキストはvalue属性で設定します。

<input type="button" value="ボタン">

image / 画像ボタン

imageは画像ボタンの入力形式です。

src属性値の画像がボタンになります。

<input type="image" src="/favicon.png">

checkbox / チェックボックス

checkboxはチェックボックスの入力形式です。

クリックに応じてチェック状態が反転します。

<input type="checkbox">

radio / 排他的選択

radioは排他的選択の入力形式です。

name属性値が同じ入力項目で、１つのみ選ぶことができます。

<input name="test" type="radio">
<input name="test" type="radio">
<input name="test" type="radio">

password / パスワード

passwordはパスワードの入力形式です。

入力データは*などに代わって表示されます。

<input type="password">

submit / 送信ボタン

submitはフォーム送信ボタンの入力形式です。

ボタンに表示するテキストはvalue属性で設定します。

このタイプのボタンがform要素の中にある場合、クリックするとフォームデータを送信します。

<input type="submit" value="送信">

email / メールアドレス

emailはメールアドレスの入力形式です。

Webブラウザのフォーム送信では、入力値がメールアドレスの形式（@マークを含むかなど）に沿っているか自動でチェックします。

<input type="email">

tel / 電話番号

telは電話番号の入力形式です。

<input type="tel">

url / URL

urlはURLの入力形式です。

<input type="url">

file / ファイル

fileはファイルの入力形式です。

ボタンをクリックすると、ローカルコンピュータからファイルを選択できます。

<input type="file">

date / 日付

dateは日付の入力形式です。

<input type="date">

datetime-local / 日時

datetime-localは日時の入力形式です。

<input type="datetime-local">

month / 年月

monthは年月の入力形式です。

<input type="month">

time / 時間

timeは時間の入力形式です。

<input type="time">

week / 週

weekは週の入力形式です。

<input type="week">

color / 色

colorは色の入力形式です。

<input type="color">

hidden / 非表示

hiddenのinput要素はは非表示になります。

ただし、フォーム送信では送信対象です。

<input type="hidden" value="test">

属性

主な属性は次の通りです。

サンプル

テキスト入力

<p>食べ物を入力してください</p>
___ih_hl_start
<input type="text">
___ih_hl_end

チェックボックス入力

___ih_hl_start
<input type="checkbox">利用規約に同意する
___ih_hl_end

日付入力

<p>予約日時を入力してください。</p>
___ih_hl_start
<input type="date">
___ih_hl_end

ファイル入力

<p>写真をアップロードしてください。</p>
___ih_hl_start
<input type="file" accept="image/*">
___ih_hl_end

パスワード入力

<p>パスワードを入力してください。</p>
___ih_hl_start
<input type="password">
___ih_hl_end

排他入力

<p>コースを選択してください。</p>
___ih_hl_start
<input type="radio" name="course">Aコース
<input type="radio" name="course">Bコース
<input type="radio" name="course">Cコース
___ih_hl_end